<template>
  <div>
    <el-table
      :data="skuList.records"
      style="width: 96%"
      border
      class="skuTable"
    >
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述" width="180">
      </el-table-column>
      <el-table-column
        prop="skuDefaultImg"
        label="默认图片"
        width="120"
        align="center"
      >
        <template slot-scope="{ row }">
          <img :src="row.skuDefaultImg" alt="" width="80px" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="80"> </el-table-column>
      <el-table-column prop="price" label="价格" width="80"> </el-table-column>
      <el-table-column prop="prop" label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            icon="el-icon-sort-down"
            size="mini"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="updateSku(row)"
          ></el-button>
          <el-button
            type="info"
            icon="el-icon-info"
            size="mini"
            @click="showDrawer(row)"
          ></el-button>
          <el-popconfirm
            :title="`确定删除${row.skuName}吗?`"
            style="margin-left: 10px"
            @onConfirm="deleteSku(row)"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              slot="reference"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="50%"
      @close="handleClose"
    >
      <el-form ref="form" label-width="180px" class="drawerFrom">
        <el-form-item label="名称">
          <span>{{ skuInfo.skuName }}</span>
        </el-form-item>
        <el-form-item label="描述">
          <span>{{ skuInfo.skuDesc }}</span>
        </el-form-item>
        <el-form-item label="价格">
          <span>{{ skuInfo.price }}元</span>
        </el-form-item>
        <el-form-item label="平台属性">
          <el-button
            type="success"
            v-for="skuAttrValue in skuInfo.skuAttrValueList"
            :key="skuAttrValue.id"
            size="mini"
            >{{ skuAttrValue.valueName }}</el-button
          >
        </el-form-item>
        <el-form-item label="商品图片" class="carousel">
          <!-- 轮播图 -->
          <el-carousel height="200px">
            <el-carousel-item
              v-for="skuImage in skuInfo.skuImageList"
              :key="skuImage.id"
            >
              <img :src="skuImage.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 分页器 -->
    <el-pagination
      :current-page.sync="page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="skuList.total"
      align="center"
      :pager-count="5"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Sku",
  data() {
    return {
      // 当前页
      page: 1,
      // 每页显示的条数
      limit: 10,
      // 存储sku数据
      skuList: [],
      // 控制抽屉显示与隐藏
      drawer: false,
      // 抽屉中的sku数据
      skuInfo: {},
    };
  },
  methods: {
    // 获取sku列表数据
    async getSkuList() {
      // 发送请求
      const result = await this.$API.sku.reqSkuList(this.page, this.limit);
      if (result.code === 200) {
        this.skuList = result.data;
        this.page = result.data.current
        this.limit = result.data.size
      }
    },
    // 每页显示的条数发送改变的回调
    handleSizeChange(limit) {
      this.limit = limit;
      // 重新发送获取sku数据
      this.getSkuList();
    },
    // 页数发送改变时的回调
    handleCurrentChange(page) {
      this.page = page;
      // 重新发送获取sku数据
      this.getSkuList();
    },
    // 展示抽屉
    async showDrawer(row) {
      this.drawer = true;
      // 发送获取sku数据的请求
      const result = await this.$API.sku.reqSkuInfo(row.id);
      console.log(result);
      if (result.code === 200) {
        this.skuInfo = result.data;
      }
    },
    // 关闭抽屉的回调
    handleClose(done) {
      console.log(1);
      // 清空skuInfo
      this.skuInfo = {};
    },
    // 修改sku
    updateSku(row) {
      this.$message({
        message: "正在开发中",
        type: "info",
      });
    },
    // 删除sku
    async deleteSku(row) {
      try {
        await this.$API.sku.reqDeleteSku(row.id)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        // 判断删除的sku是否是当前页的最后一个
        if (this.skuList.records.length <= 1) {
          this.page = this.page - 1
        }
        // 重新获取sku列表数据
        this.getSkuList()
      } catch (error) {
        this.$message({
          message: '删除失败',
          type: 'error'
        })
      }
    },
  },
  mounted() {
    // 页面挂载完毕，调用函数发送获取sku数据
    this.getSkuList();
  },
};
</script>

<style>
.skuTable {
  margin: 0 auto;
}
/* 抽屉中的form表单 */
.drawerFrom {
  margin-top: 40px;
  margin-right: 50px;
}
.drawerFrom .el-form-item__label {
  font-size: 20px;
  font-weight: 400;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel img {
  height: 100%;
}
.carousel .el-carousel--horizontal {
  width: 200px;
}
.el-carousel__button {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}
</style>